import React from 'react';
import type { Employee, AttendanceRecord, PayrollRecord } from '../types';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';

interface DashboardProps {
    employees: Employee[];
    attendance: AttendanceRecord[];
    payroll: PayrollRecord[];
}

const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode }> = ({ title, value, icon }) => (
    <div className="bg-white p-6 rounded-xl shadow-md flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
            <p className="text-sm font-medium text-slate-500">{title}</p>
            <p className="text-2xl font-bold text-slate-800">{value}</p>
        </div>
        <div className="bg-indigo-100 p-3 rounded-full">
            {icon}
        </div>
    </div>
);

const Dashboard: React.FC<DashboardProps> = ({ employees, attendance, payroll }) => {
    const totalEmployees = employees.length;
    const onTimeToday = attendance.filter(a => a.status === 'Present' || a.status === 'Late').length;
    const totalPayroll = payroll.reduce((acc, p) => acc + p.netPay, 0);

    const departmentData = employees.reduce((acc, emp) => {
        const dept = emp.department;
        if (!acc[dept]) {
            acc[dept] = { name: dept, count: 0 };
        }
        acc[dept].count++;
        return acc;
    }, {} as Record<string, { name: string; count: number }>);
    
    const chartData = Object.values(departmentData);

    const COLORS = ['#6366F1', '#818CF8', '#A5B4FC', '#C7D2FE'];

    return (
        <div className="space-y-8">
            <h2 className="text-3xl font-bold text-slate-800">仪表盘</h2>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <StatCard title="总员工数" value={totalEmployees.toString()} icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.124-1.282-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.124-1.282.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>} />
                <StatCard title="今日出勤" value={`${onTimeToday} / ${totalEmployees}`} icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>} />
                <StatCard title="月度工资总额" value={`¥${totalPayroll.toLocaleString()}`} icon={<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" /></svg>} />
            </div>
            
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
                <div className="lg:col-span-3 bg-white p-6 rounded-xl shadow-md">
                    <h3 className="font-bold text-slate-800 mb-4">各部门人数</h3>
                     <ResponsiveContainer width="100%" height={300}>
                        <BarChart data={chartData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} />
                            <XAxis dataKey="name" tick={{fill: '#64748B', fontSize: 12}} />
                            <YAxis tick={{fill: '#64748B', fontSize: 12}} />
                            <Tooltip cursor={{fill: 'rgba(99, 102, 241, 0.1)'}} />
                            <Legend />
                            <Bar dataKey="count" fill="#6366F1" name="员工数" barSize={30} radius={[4, 4, 0, 0]} />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
                <div className="lg:col-span-2 bg-white p-6 rounded-xl shadow-md">
                    <h3 className="font-bold text-slate-800 mb-4">员工分布</h3>
                    <ResponsiveContainer width="100%" height={300}>
                        <PieChart>
                            <Pie data={chartData} dataKey="count" nameKey="name" cx="50%" cy="50%" outerRadius={100} fill="#8884d8">
                                {chartData.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)}
                            </Pie>
                             <Tooltip />
                            <Legend />
                        </PieChart>
                    </ResponsiveContainer>
                </div>
            </div>

        </div>
    );
};

export default Dashboard;
